// ------------------------------
// MEDIA QUERIES
// ------------------------------
@media only screen and (min-width:1200px) {
    .page {
        .tag-header {
            width: $container-large-width;
        }
    }

    .post .post-card,
    .post .post-related,
    .container-wrapper {
        max-width: $container-large-width;
    }
}

// ------------------------------
// < 1024px (Tablet)
// ------------------------------
@media all and (max-width:1024px) {
    .post {
        margin: 0;

        .post-card,
        .post-related {
            margin: 0 40px;
        }
    }

    .container-wrapper {
        max-width: $container-small-width;
    }

    .cover {
        &.expanded {
            .nav-header {
                &.mobile {
                    position: absolute;
                    display: block;

                    > a {
                        > i {
                            color: $slate-white;
                        }
                    }
                }
            }
        }
    }

    .profile {
        width: 100%;
        height: 100%;
        max-width: 100%;
        &.contact {
            nav {
                padding: 0;
            }
        }
        a {
            img {
                width: 128px;
                margin-bottom: 16px;
            }
        }

        p {
            margin: 0 160px;
        }
    }

    #avatar-link {
        display: inline-block;
        margin-top: 64px;
    }

    .navigation {
        width: 100%;
        &.right {
            margin: 0;
        }
        &.left {
            .links.item {
                width: 100%;
            }
        }
    }
    main {
        left: 0;
        transform: translate3d(0, 0, 0);
    }
}

@media all and (max-width: 700px) {
    .container-wrapper {
        max-width: 100%;
    }

    .card {
        width: 100%;
    }
}

// ------------------------------
// < 600px ( 7" Tablet)
// ------------------------------
@media all and (max-width:600px) {
    .post {
        .post-related,
        .post-card {
            margin: 0 20px;

            .post-container {
                padding: 20px 40px;
            }
        }
    }

    .post-content {
        p {
            img {
                width: 100%;
            }
        }
    }

    .nav-header {
        &.nav-header-fixed {
            position: absolute;
        }
    }

    .profile {
        p {
            margin: 0 80px;
        }
    }

    .post {
        > p {
            > input {
                width: auto;
            }
        }
    }

    .error-body {
        margin: 30px auto;
        padding: 0 12px;

        h1 {
            font-size: 36px;
        }

        h2 {
            font-size: 18px;
        }
    }

    .search-container {
        margin-top: 60px;
    }

    .card {
        .card-footer {
            .share {
                display: none;
            }
        }
    }

    .pagination {
        &.post-related {
            .btn {
                margin: 20px;
            }

            #prev-btn,
            #next-btn {
                float: none;
            }
        }
    }

    body {
        .page-browser-compatibility {
            .error-body {
                margin-top: 20px;
            }
        }
    }
}

// ------------------------------
// < 480px (Mobile)
// ------------------------------
@media all and (max-width:480px) {
    .btn {
        display: block;
        margin: 10px 0;
        text-align: center;

        &.small {
            padding: 14px;
        }
    }

    .blog-header {
        h1 {
            margin-bottom: 5px;
            font-size: $unit * 2;
        }
    }

    .posts {
        margin: 0 12px;
    }

    .post {
        .material-cover {
            margin-bottom: 0;
        }

        .post-related,
        .post-card {
            margin: 0;

            .post-container {
                padding: 20px;
            }

        }

        &.newer,
        &.older {
            padding: 16px;
        }
        &.newer {
            margin: 0 0 20px;
        }
        &.older {
            margin: 0 0 10px;
        }
    }

    .pagination {
        text-align: center;
        padding: 0 20px;

        .btn {
            margin: 12px;
        }
    }

    .profile {
        p {
            margin: 0 16px;
        }
    }

    .nav-header {
        > a {
            left: 10px;

            &.right {
                right: 10px;
            }
        }
    }

    blockquote {
        > p {
            margin: 32px 10px;
        }
    }
}
